<template>
    <view class="order-card">
        <view class="swipe-action">
            <view class="item">
                    <image class="item-image" :src="list.img"></image>
                <view class="info">
                    <view class="title">
                        {{ list.title }}
                    </view>
                    <view class="integral">
                        {{ list.integral }}积分
                    </view>
					<view class="price" v-if="show">
                        {{ list.price }}积分
                    </view>
					
                    <view class="choose">
                        <number-box v-model="list.value" @change="valChange" :min="1" :max="99" input-height='40'></number-box>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<!--  -->

<script>
    export default {
        props: {
            list: {
                type: Object,
                default: {}
            },
            options: {
                type: Array,
                default: []
            },
            show: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                value: false
            }
        },
        methods: {
            // 步进器的值
            valChange(e) {
                // console.log(e.value);
                // 把值抛出去
                this.$emit("total",e.value)
            }
        },
        mounted() {
        }
    }
</script>

<style scoped lang="scss">
    .order-card {
        width: 100%;
        // position: relative;
        margin-left: 48rpx;
        .swipe-action {
            font-size: 28rpx;
            line-height: 1em;
            padding-right: 28rpx;
            .item {
				padding: 32rpx  32rpx  32rpx 0;
                display: flex;
                justify-content: flex-start;
            }
            
            .item-image {
                width: 188rpx;
                height: 188rpx;
                border-radius: 12rpx;
            }
            
            .info {
				padding-top: 20rpx;
                padding-left: 30rpx;
                width: calc(100% - 188rpx);
                box-sizing: border-box;
                .title {
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 1.3em;
                }
                .integral {
                    padding: 16rpx 0 20rpx;
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #FF504C;
                    line-height: 1em;
					display: inline-block;
                }
				.price {
					display: inline-block;
					font-size: 24rpx;
					color: #999;
					line-height: 24rpx;
					text-decoration:  line-through;
					padding-left: 12rpx;
				}
                .choose {
					padding-top: 30rpx;
                    padding-right: 16rpx;
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
    }
    
</style>
